<template>
  <div class="class">
    <el-row :gutter="25" type="flex" justify="space-between">
      <el-col :span="5">
        <class-recommend />
      </el-col>
      <el-col :span="14" class="class-content-center">
        <div class="class-content-center-title">
          <button class="class-content-center-title-button">课程表</button>
        </div>
        <div>
          <el-table
            :row-class-name="tableRowClassName"
            style="width: 100%"
            height="365px"
            :data="resultBookTable"
            class="class-content-center-table"
            :header-cell-style="changHeaderStyle"
          >
            <el-table-column
              v-for="(item,index) in tableTitle"
              :key="item.timeDate"
              align="center"
            >
              {{ item.date }}
              <template slot="header" slot-scope="scope">
                <div v-if="scope.$index === 0">
                  <div>课程</div>
                  <div />
                  <div>时间</div>
                </div>
                <div v-else>
                  {{ item.date }}
                </div>
              </template>
              <template slot-scope="scope">
                <div v-if="scope.row[index] !== '0'" class="class-content-center-table-content">{{ scope.row[index] }}</div>

              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
      <el-col :span="5">
        <class-recommend />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ClassRecommend from './ClassRecommend'
export default {
  components: {
    ClassRecommend
  },
  data() {
    return {
      classBookTable: [],
      tableTitle: [],
      resultBookTable: [],
      timeForm: ['9:25-9:50', '10:25-10:50', '11:25-11:50', '12:25-12:50', '13:25-13:50', '14:25-14:50', '15:25-15:50', '16:30-16:55']
    }
  },
  mounted() {
    this.getClassTable()
  },
  methods: {
    // 表头样式
    changHeaderStyle(row, rowIndex) {
      if (row.columnIndex !== 0) { return 'background:rgba(254,248,73,0.3)' }
    },
    // 获取课程表
    async getClassTable() {
      const { data } = await this.$API.classAPI.getClassTable()
      this.classBookTable = data.rows
      this.clearClassBookTableData()
    },
    // 数据整理
    clearClassBookTableData() {
      // 第一行第一个单元格空着
      this.tableTitle.push('')
      // 把他变成数组
      const changeClassBookTable = this.classBookTable.map(row => {
        this.tableTitle.push({
          date: row.date,
          time: this.$dayjs(row.datatime).valueOf()
        })
        const arr = []
        for (let i = 1; i <= 8; i++) {
          const a = `time${i}`
          arr.push(row[a])
        }
        return arr
      })

      this.resultBookTable = changeClassBookTable[0].map((item, index) => {
        return [this.timeForm[index], ...changeClassBookTable.map(col => {
          return col[index]
        })]
      })
    },
    tableRowClassName({ row, rowIndex }) {
      console.log(rowIndex)
      if (rowIndex % 2 === 0) {
        return 'warning-row'
      } else {
        return 'success-row'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.class {
  margin-top: -25px;
  width: 100%;
  .class-content-center {
    .class-content-center-title {
      width: 100%;
      height: 2px;
      border: 2px solid rgb(56, 155, 74);
      display: flex;
      justify-content: center;
      align-items: center;
      .class-content-center-title-button {
        font-size: 20px;
        width: 140px;
        height: 60px;
        border-radius: 15px;
        color: rgb(242, 242, 242);
        background-color: rgb(91, 152, 207);
        border: 0;
      }
    }
    .class-content-center-table{
      margin-top:50px;
      &-content{
        // background-color: rgba(144,185,233,0.6);
      }
    }

  }
}
</style>
